<template>
  <div class="navbar">
    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
      :default-active="$route.path" text-color="#fff" :default-openeds="['/students']" :router="true">
      <Menu :menuList="menuNodes"></Menu>
    </el-menu>
  </div>
</template>
<script setup lang="ts">
import Menu from './menu/index.vue';
// 所有菜单项数组
import menuList from '@/config/menuConfig';
// 引入数据类型
import type { MenuData } from './types/type';
// 引入用户小仓库
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();
// 引入路由对象
import { useRoute } from 'vue-router';
const $route = useRoute()
// 判断当前用户是否拥有此权限，判断当前这个菜单项是否需要展示
const hasAuth = (item: MenuData) => {
  // 从当前菜单项中解构出index和isPublic
  const { index, isPublic } = item;
  
  // 获取当前登录用户的权限列表
  const menus = userStore.user?.role?.menus;
  
  // const menus = ['/user', '/school', '/major'];
  // 获取当前登录的用户的用户名
  const username = userStore.user?.username
  /*
  当前菜单项需要展示的条件
  1，如果登录的是超级管理员
  2，isPublic为true
  3，当前登录的用户权限数组中包含此项
  */
  if (username == "admin" || isPublic == true || menus?.indexOf(index) != -1) {
    return true;
  }else {
    return false;
  }
};
// 定义一个数组，用于存储所有需要展示的菜单项（拥有权限的菜单项）
let menuNodes:any[] = [];
// 过滤需要展示的菜单项
const getMenuNodes = ()=>{
  // 循环遍历所有的菜单项数组，拿每一个菜单项对象调用hasAuth方法判断，如果返回true就代表需要展示，就添加到menuNodes中，那么循环结束之后menuNodes数组中存储的就是所有需要展示的菜单项了
  menuList.forEach(item=>{
    // 一级菜单项
    if(!item.children){
      // 拥有此权限，需要展示这个菜单项
      if(hasAuth(item)){
        menuNodes.push(item)
      }
    }else{

      // 定义数组用于存储子级菜单项
      let arr:any[] = []
      item.children.forEach(child=>{
        // console.log('child',child,hasAuth(child));
        
        if(hasAuth(child)){
          arr.push(child)
        }
      })
      let obj = {...item,children:arr}
      menuNodes.push(obj)
    }
  })
}
getMenuNodes()
// console.log('menuNodes',menuNodes);

</script>

<style scoped>
.el-menu {
  border: 0;
}
</style>